<template>
	<view>
		<view class="btn-all">
			<button v-for="(item, index) in top_list" :key="item.id" plain="true"  class="btns" hover-class="hover-btns">
				{{ item.name }}
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		props: ['top_list'],
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
	.btn-all {
		height: 410rpx;
		margin-top: 10rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-content: center;
		// row-gap: 50rpx;	
		.btns:nth-child(5){
			margin-top: 50rpx;
		}
		.btns:nth-child(6){
			margin-top: 50rpx;
		}
		.btns:nth-child(7){
			margin-top: 50rpx;
		}
		.btns:nth-child(8){
			margin-top: 50rpx;
		}
		.btns:nth-child(9){
			margin-top: 50rpx;
		}
		.btns:nth-child(10){
			margin-top: 50rpx;
		}
		.btns:nth-child(11){
			margin-top: 50rpx;
		}
		.btns:nth-child(12){
			margin-top: 50rpx;
		}
		.btns {
			color: #ebebeb;
			border: 1px solid #ebebeb;
			width: 160rpx;
			font-size: 20rpx;
			padding: 9rpx 10rpx;
			height: 70rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
	
	.hover-btns {
		background-color: #e1e1e1;
		color: #333333 !important;
	}
</style>
